<template>
    <div>
        <span v-if="inactiveText" :class="[checked ? 'is-active':'']">{{inactiveText}}</span>
        <input 
            type="checkbox" 
            class="switch" 
            :disabled="switchDisabled" 
            ref="input" 
            :value="checked"
            @change="handleChange"
            @keydown="switchValue"
        />
        <span v-if="activeText" :class="[checked ? '': 'is-active']">{{activeText}}</span>
    </div>
</template>

<script>

    export default {
        name: 'MySwitch',
        props: {
            // 组件参数
            value: {
                type: [Boolean, String, Number],
                default: false
            },
            // 是否禁用
            disabled: {
                type: Boolean,
                default: false
            },
            // 设置激活颜色
            activeColor: {
                type: String,
                default: ''
            },
            // 设置激活文本
            activeText: {
                type: String,
                default: ''
            },
            // 设置不激活的颜色
            inactiveColor: {
                type: String,
                default: ''
            },
            // 设置不激活的文本
            inactiveText: {
                type: String,
                default: ''
            },
            activeValue: {
                type: [Boolean, String, Number],
                default: true
            },
            inactiveValue: {
                type: [Boolean, String, Number],
                default: false
            },
        },
        watch: {
            checked() {
                this.$refs.input.checked = this.checked;
                if(this.activeColor || this.inactiveColor) {
                    this.setBackgroundColor();
                }
            }
        },
        computed: {
            checked() {
                return this.value === this.activeValue;
            },
            // 计算属性 预留出来的disabled属性
            switchDisabled() {
                return this.disabled;
            }
        },
        mounted() {
            if(this.activeColor || this.inactiveColor) {
                this.setBackgroundColor();
            }
            this.$refs.input.checked = this.checked;
        },
        methods: {
            setBackgroundColor() {
                let newColor = this.checked ? this.activeColor : this.inactiveColor;
                // 将newColor设置到input上
                this.$refs.input.style.border = newColor;
                this.$refs.input.style.backgroundColor = newColor;
            },
            // 触发改变事件
            handleChange() {
                const val = this.checked ? this.inactiveValue : this.activeValue;
                // 将是否选中的value值传递到组件外
                this.$emit('input', val)
                this.$refs.input.checked = this.checked;
            },
            // 点击事件
            switchValue() {
                this.handleChange();
            }
        }
    }
</script>

<style lang="scss" scoped>
     /* Switch开关样式 */
 /* 必须是input为 checkbox class 添加 switch 才能实现以下效果 */
 input[type='checkbox'].switch{
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    width: 40px;
    height: 20px;
    background: #ccc;
    border-radius: 10px;
    transition: border-color .3s, background-color .3s;
}

input[type='checkbox'].switch::after {
    content: '';
    display: inline-block;
    width: 1rem;
    height:1rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0, 0, 2px, #999;
    transition:.4s;
    top: 2px;
    position: absolute;
    left: 2px;
}

input[type='checkbox'].switch:checked {
    background: rgb(19, 206, 102);
}
/* 当input[type=checkbox]被选中时：伪元素显示下面样式 位置发生变化 */
input[type='checkbox'].switch:checked::after {
    content: '';
    position: absolute;
    left: 55%;
    top: 2px;
}

// 设置激活的文本颜色
.is-active {
    color: #2b84e2;
}

</style>